<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
<div id="box">
    <aa></aa>
</div>
</body>
<script type="text/javascript" src="./bower_components/vue/dist/vue.min.js"></script>
<script>
    var Aaa=Vue.extend({
//     错误写法
//     data:{
//        msg:"我是标题3",
//     },
//     es6写法
//       data(){
//          return {
//              msg:"我是标题"
//          }
//       },
//     不用es6写法
       data:function(){
           //函数必须返回一个对象
           return {
               msg:"我是标题"
           }
       },
       methods:{
           showAlert(){
               alert(123456);
           }
       },
//     ***组件里面放数据:  data必须是函数的形式，函数必须返回一个对象(json),其他的是一样的写法，如事件
       template:'<h3 @click="showAlert()">{{msg}}</h3>'
    });
    //放在这里就是 全局组件
    Vue.component("aa",Aaa);
    //
    new Vue({
        el:'#box',
        data:{
            msg:'box'
        },
    });
//    组件: 也就是一个大对象
//    1. 全局组件
//    var Aaa=Vue.extend({
//        template:'<h3>我是标题3</h3>'
//    });
//    Vue.component('aaa',Aaa);

</script>
</html>